var imgA = $('.imgA');
var imgAwidth = parseInt(imgA.css('width'));
var imgAheight = parseInt(imgA.css('height'));
var cellW = imgAwidth / 3;
var cellH = imgAheight / 3;
var oriArr = [];
var randArr = [];
var flag = true;
var imgC;
var imgB;
init();
function init() {
    imgS();
    gameStrat();
}
function imgS() {//生成3x3的div 并且传入标准空数组中
    // var  cells = [];
    var cell;
    // var cellb;
    // var cellz=[];
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
            oriArr.push(i * 3 + j);//标准正确数组
            cell = $('<div class="imgC"></div>');
            cellb=$('<div class="imgB"></div>');
            // cells.push(cell[0]);
            // cellz.push(cellb[0]);
            cell.css({
                'width': cellW + 'px',
                'height': cellH + 'px',
                'left': cellW * j,
                'top': cellH * i,
                'backgroundPosition': (-cellW) * j + 'px ' + (-cellH) * i + 'px',
                'z-index':2
            })
            cellb.css({
                'width': cellW + 'px',
                'height': cellH + 'px',
                'left': cellW * j,
                'top': cellH * i,
                'backgroundPosition': (-cellW) * j + 'px ' + (-cellH) * i + 'px',
                'z-index':1
            })

            imgA.append(cell);
            // imgA.append(cellb);
        }
    }
    // cells.forEach((ele,index)=>{
    //     ele.addEventListener("mouseenter",()=>{
    //         console.log("当前图片位置",index);
    //     })
    // });
    // cellz.forEach((ele,index)=>{
    //     ele.addEventListener("mouseenter",()=>{
    //         console.log("当前目标位置",index);
    //     })
    // });
    imgC = $('.imgC');
}
function gameStrat() { 
    $('.start').on('click', function () {
        if (flag) {
            $(this).text('复原');
            flag = false;
            randDomArr();  //打乱数组
            // console.log(randArr);
            cellori(randArr); //再把乱序数组传给渲染页面方法
            imgC.on('mousedown', function (e) { //移动
                var index1 = $(this).index();
                var left = e.pageX - imgC.eq(index1).offset().left;
                var top = e.pageY - imgC.eq(index1).offset().top;
                // console.log("index1:",index1);
                $(document).on('mousemove', function (e2) {
                    imgC.eq(index1).css({
                        'z-index': '40',
                        'left': e2.pageX - left - imgA.offset().left + 'px',
                        'top': e2.pageY - top - imgA.offset().top + 'px'
                    });
                }).on('mouseup', function (e3) {
                    var left = e3.pageX - imgA.offset().left;
                    var top = e3.pageY - imgA.offset().top;
                    var index2 = changeIndex(left,top,index1); //获得目标索引值
                    console.log("index2:",index2)
                    if (index1 == index2) {
                        cellReturn(index1); //返回原位置
                    } else {
                        cellChange(index1,index2) //执行交换
                    }
                    $(document).off('mousemove').off('mouseup')

                })
            })
        }
        else {
            $(this).text('开始');
            flag = true;
            cellori(oriArr);
            $('.imgC').off('mousemove').off('mouseup').off('mousedown')

        }
    })
}
function randDomArr() {
    randArr = [];
    var len = oriArr.length;
    var order;
    for (var i = 0; i < len; i++) { //随机生成10个数
        order = Math.floor(Math.random() * len);
        if (randArr.length > 0) {
            while ($.inArray(order, randArr) > -1) {//判断是否重复 这个方法当前order数在randArr有重复就会返回-1
                order = Math.floor(Math.random() * len);
            }
        }
        randArr.push(order);
    }
    return;
}
function cellori(arr) {//渲染页面
    var len = arr.length;
    for (var i = 0; i < len; i++) {
        imgC.eq(i).animate({
            'left': arr[i] % 3 * cellW + 'px',
            'top': Math.floor(arr[i] / 3) * cellH + 'px'
        }, 400)
    }
}
function changeIndex(x, y, i) {//获得目标索引值
    if (x < 0 || x > imgAwidth || y < 0 || y > imgAheight) {
        
        return i; 
       
    }
    var row,
        col;
    if(x>0&&x<100){
        row=0;
    }else if(x>100&&x<200){
        row=1;
    }else{
        row=2;
    }
    if(y>0&&y<100){
        col=0;
    }else if(y>100&&y<200){
        col=1;
    }else{
        col=2;
    }
    // var row = Math.floor(((x/imgAwidth)*10)% 3);
    console.log("row:",row);
    // var col = Math.floor(((y/imgAheight)*10)%3);
    console.log("col:",col);
    var l = row * 3 + col;
    console.log("l:",l);
    var i = 0, len = randArr.length;
    // while ((i < len) && (randArr[i] !== l)) {
    //     i++;
    // }
    return l;
}
function cellReturn(index) { //返回原位置
    var j = randArr[index] % 3;
    // console.log("j:",j);
    var i = Math.floor(randArr[index] / 3);
    // console.log("i:",i);
    imgC.eq(index).animate({
        'left': cellW * j + 'px',
        'top': cellH * i + 'px'
    }, 400, function () {
        $(this).css('z-index', '10')
    })
}
function cellChange(from,to) {  //执行交换
    var fj = randArr[from] % 3;
    // console.log("fj:",fj);
    var fi = Math.floor(randArr[from] / 3);
    // console.log("fi:",fi);
    var tj = randArr[to] % 3;
    // console.log("tj:",tj,"to:",to,"randArr[to]:",randArr[to],"randArr:",randArr);
    var ti = Math.floor(randArr[to] / 3);
    // console.log("ti:",tj,"to:",to,"randArr[to]:",randArr[to],"randArr:",randArr);
    var temp = randArr[from];
    imgC.eq(from).animate({
        'left': cellW * tj + 'px',
        'top': cellH * ti + 'px'
    }, 400, function () {
        $(this).css('z-index', '10')
    });
    imgC.eq(to).animate({
        'left': cellW * fj + 'px',
        'top': cellH * fi + 'px'
    }, 400, function () {
        $(this).css('z-index', '10');
        randArr[from] = randArr[to];
        randArr[to] = temp;
        win();

    })

}
function win() { //判定是否成功
    if (oriArr.toString() == randArr.toString()) {
        alert('right');
        $('.start').text('开始');
        flag = true;

    }
}
// var aa;
// aa=setInterval(function(){$('.start').click()}

//     ,250)